<script>
import { formatTimestamp } from '@/utils/formatTime';
import "highlight.js/styles/github.css";
import '@/styles/markdown.css'
export default {
  data() {
    return {
    }
  },
  props: {
    data: {
      type: Object,
    }
  },
  methods: {
    // 格式时间
    formatTimestamp,
  },
}
</script>



<template>
  <div class="blog-detail-container">
    <div class="title">
      <h1>{{ data.title }}</h1>
    </div>
    <div class="aside">
      <span>日期：{{ formatTimestamp(+data.createDate) }} </span>
      <span>浏览：{{ data.scanNumber }}次</span>
      <span><a href="#data-form-container">评论：{{ data.commentNumber }}条</a></span>
      <a :href="`/blog/cate/${data.category.id}`" class="">{{ data.category.name }}</a>
    </div>
    <div class="markdown-body" v-html="data.htmlContent">

    </div>
  </div>
</template>

<style lang='less' scoped>
@import '~@/styles/var.less';

.blog-detail-container {
  line-height: 1.7;
  padding: 20px;
  position: relative;

  .aside {
    position: relative;
    margin: 10px 0;
    color: @gray;

    span {
      margin: 0 8px;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 12px;
      }
    }
  }

  .markdown-body {
    position: relative;
  }
}
</style>
